<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>员工详情 - 人力资源管理系统</title>
  <style>
    /* 复用基础样式 */
    body {
      margin: 0;
      font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
      background: #f5f7fa;
    }
    .layout {
      display: flex;
      height: 100vh;
    }
    .sidebar {
      width: 220px;
      background: #232a3b;
      color: #fff;
      display: flex;
      flex-direction: column;
      padding-top: 16px;
    }
    .sidebar h2 {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 32px 24px;
      letter-spacing: 2px;
    }
    .sidebar ul {
      list-style: none;
      padding: 0 0 0 24px;
      margin: 0;
    }
    .sidebar li {
      margin-bottom: 18px;
      font-size: 16px;
      opacity: 0.85;
      cursor: pointer;
    }
    .sidebar li.active {
      color: #40a9ff;
      font-weight: bold;
    }
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .topbar {
      height: 56px;
      background: #fff;
      display: flex;
      align-items: center;
      padding: 0 32px;
      border-bottom: 1px solid #e5e6eb;
      justify-content: space-between;
    }
    .topbar .title {
      font-size: 18px;
      font-weight: bold;
      color: #232a3b;
    }
    .topbar .user {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .content {
      flex: 1;
      padding: 24px 32px;
      overflow-y: auto;
    }
    .detail-card {
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    }
    .detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e5e6eb;
    }
    .detail-title {
      font-size: 16px;
      font-weight: bold;
      color: #232a3b;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .detail-title::before {
      content: '';
      display: block;
      width: 4px;
      height: 16px;
      background: #40a9ff;
      border-radius: 2px;
    }
    .detail-actions {
      display: flex;
      gap: 16px;
    }
    .detail-button {
      padding: 8px 16px;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      background: #fff;
      color: #232a3b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .detail-button.primary {
      background: #40a9ff;
      color: #fff;
      border: none;
    }
    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .info-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .info-label {
      font-size: 14px;
      color: #666;
    }
    .info-value {
      font-size: 14px;
      color: #232a3b;
    }
    .doc-preview {
      width: 300px;
      height: 220px;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      overflow: hidden;
      background: #fafafa;
      position: relative;
    }
    .doc-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .doc-preview.empty {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
    }
    .doc-preview.empty::before {
      content: '';
      width: 64px;
      height: 80px;
      background: #e5e6eb;
      border-radius: 4px;
      position: relative;
    }
    .doc-preview.empty::after {
      content: '';
      width: 48px;
      height: 48px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='12' y='8' width='24' height='32' rx='2' stroke='%23666666' stroke-width='2'/%3E%3Cpath d='M17 16H31' stroke='%23666666' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M17 24H31' stroke='%23666666' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M17 32H25' stroke='%23666666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    .preview-grid {
      display: grid;
      grid-template-columns: repeat(2, 300px);
      gap: 24px;
      margin-top: 16px;
    }
    .preview-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .preview-title {
      font-size: 14px;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="layout">
    <div class="sidebar">
      <h2>业信人力资源管理系统</h2>
      <ul>
        <li>客户管理</li>
        <li class="active">人员花名册</li>
        <li>合同管理</li>
        <li>薪酬管理</li>
        <li>系统设置</li>
      </ul>
    </div>
    <div class="main">
      <div class="topbar">
        <span class="title">员工详情</span>
        <div class="user">
          <span>管理员</span>
          <img src="https://via.placeholder.com/32x32.png?text=U" style="border-radius:50%;" alt="用户头像">
        </div>
      </div>
      <div class="content">
        <!-- 人员信息 -->
        <div class="detail-card">
          <div class="detail-header">
            <div class="detail-title">人员信息</div>
            <div class="detail-actions">
              <button class="detail-button">导出信息</button>
              <button class="detail-button primary">编辑信息</button>
            </div>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">姓名</span>
              <span class="info-value">张三</span>
            </div>
            <div class="info-item">
              <span class="info-label">身份证号</span>
              <span class="info-value">3301************1234</span>
            </div>
            <div class="info-item">
              <span class="info-label">性别</span>
              <span class="info-value">男</span>
            </div>
            <div class="info-item">
              <span class="info-label">民族</span>
              <span class="info-value">汉族</span>
            </div>
            <div class="info-item">
              <span class="info-label">工作岗位</span>
              <span class="info-value">Java工程师</span>
            </div>
            <div class="info-item">
              <span class="info-label">入职日期</span>
              <span class="info-value">2024-01-01</span>
            </div>
          </div>
          <div class="preview-grid">
            <div class="preview-item">
              <span class="preview-title">身份证正面照片</span>
              <div class="doc-preview empty">
                <span style="color: #666; font-size: 14px;">身份证正面</span>
              </div>
            </div>
            <div class="preview-item">
              <span class="preview-title">身份证背面照片</span>
              <div class="doc-preview empty">
                <span style="color: #666; font-size: 14px;">身份证背面</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 银行卡信息 -->
        <div class="detail-card">
          <div class="detail-header">
            <div class="detail-title">银行卡信息</div>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">开户银行</span>
              <span class="info-value">中国建设银行</span>
            </div>
            <div class="info-item">
              <span class="info-label">银行卡号</span>
              <span class="info-value">6217 **** **** 1234</span>
            </div>
          </div>
          <div class="preview-grid">
            <div class="preview-item">
              <span class="preview-title">银行卡正面照片</span>
              <div class="doc-preview empty">
                <span style="color: #666; font-size: 14px;">银行卡正面</span>
              </div>
            </div>
            <div class="preview-item">
              <span class="preview-title">银行卡背面照片</span>
              <div class="doc-preview empty">
                <span style="color: #666; font-size: 14px;">银行卡背面</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 社保卡信息 -->
        <div class="detail-card">
          <div class="detail-header">
            <div class="detail-title">社保卡信息</div>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">社保卡号</span>
              <span class="info-value">3301 **** **** 5678</span>
            </div>
            <div class="info-item">
              <span class="info-label">参保城市</span>
              <span class="info-value">杭州市</span>
            </div>
          </div>
          <div style="width: 300px; margin-top: 16px;">
            <div class="preview-item">
              <span class="preview-title">社保卡照片</span>
              <div class="doc-preview empty">
                <span style="color: #666; font-size: 14px;">社保卡</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 其他信息 -->
        <div class="detail-card">
          <div class="detail-header">
            <div class="detail-title">其他信息</div>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">入职状态</span>
              <span class="info-value">正式</span>
            </div>
            <div class="info-item">
              <span class="info-label">试用期</span>
              <span class="info-value">已通过</span>
            </div>
            <div class="info-item">
              <span class="info-label">合同到期日</span>
              <span class="info-value">2027-01-01</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html> 